<template>
  <div style="font-size: 14px;">
    <div class="header_2018 clear_rx">
      <div class="header_nav" style="display: block;">
        <div class="content">
          <!-- <div class="nav_box_20211215">
            <ul class="ul_nav" style="display: block;">
              <li v-for="(item,index) in leftTopMenus" :key="index" class="lis app_down">
                <a>
                  {{item.name}}
                </a>
              </li>
              <li class="lis app_down">
                <span>下载APP</span>
                <img src="api/image/url/bbbb.png">
              </li>

            </ul>

          </div> -->

          <div class="ur_r_html">
            <div class="ul_r_2018">
              <div v-if="!islogin" class="hd-login-regist" style="line-height: 40px;">
                <a href="javascript:;" class="regist_btn_new regist_zc" @click="loginPage">注册</a>
                <i class="vertical-line"></i>
                <a href="javascript:;" class="login" @click="loginPage">登录</a>
              </div>

              <div v-else class="hd-login-show" style="display: block;">

                <ul style="margin-top: 0px;padding: 0;">

                  <li class="user">
                    <span class="userNameNav" style="color: rgb(255, 255, 246);">{{userInfo.nickname}}</span>
                    <!-- <img class="userLeve" src="api/image/url/aaaa.jpg" alt=""> -->
                    <div class="myCenter bg_sliver" style="display: block;">
                      <div class="top clear_rx" style="height: 110px;">
                        <a>
                          <img class="uer_img" :src="'api'+userInfo.avatar" alt="">
                          <div class="blackgold-userimg-sign">
                            <img class="blackgold-sign-icon" src="../../../public/img/gl3nxyjuw4bjcbu3pl1uiwvcwvlm2o470712.png">
                            <span class="blackgold-sign-txt">黑金VIP</span>
                          </div>
                        </a>
                        <div class="user_id">
                          <a>
                            <p class="noName">{{userInfo.nickname}}</p>
                          </a>
                          <div class="my-card-box">
                            <!-- 黑金卡 -->
                            <i class="my-black-card" style="display: none;"></i>
                            <!-- 会员等级展示 -->
                            <a class="black-href blackgold-title-icon sliver_icon">
                            </a>
                            <!-- 开通黑金 -->
                            <a class="mycard-subtitle-link new-card-type">
                            </a>
                          </div>
                        </div>
                        <a class="logout" @click="logoutFun">退出登录   修改密码还没写</a>
                      </div>
                      <!-- <div class="mid clear_rx">
                        <ul>
                          <li>
                            <a>
                              <div style="font-size: 17px;font-weight: 600;color: #545B5A;" class="userledou">600</div>
                              <span>乐豆</span>
                            </a>
                          </li>
                          <li>
                            <a>
                              <div style="font-size: 17px;font-weight: 600;color: #545B5A;" class="usercoupon">26</div>
                              <span>优惠券</span>
                            </a>
                          </li>
                          <li style="display:none;">
                            <a>
                              <div style="font-size: 17px;font-weight: 600;color: #545B5A;" class="userScore">0</div>
                              <span>消费积分</span>
                            </a>
                          </li>
                          <li>
                            <a>
                              <div style="font-size: 17px;font-weight: 600;color: #545B5A;" class="userGrowth">0</div>
                              <span>成长值</span>
                            </a>
                          </li>
                        </ul>
                      </div> -->
                      <div class="bottom">
                        <ul>
                          <li>
                            <a>
                              <img src="../../../public/img/208ff503-1712-463c-a7a2-6abe09ac064e.png" alt="">
                              <span>我的订单</span>
                            </a>
                          </li>

                          <li>
                            <a href="/#/info">
                              <img src="../../../public/img/d3da30f6-cd3e-4120-8db2-712c95ba4fff.png" alt="">
                              <span>会员中心</span>
                            </a>
                          </li>
                          <li>
                            <a>
                              <img src="../../../public/img/1e768e9d-2fd2-46d0-8f52-f2f388f71620.png" alt="">
                              <span>我的社区</span>
                            </a>
                          </li>
                          <!-- <li>
                            <a>
                              <img src="../../../public/img/36f85303-ab0d-4ef6-a48b-6bd8594f7068.png" alt="">
                              <span>我的服务</span>
                            </a>
                          </li> -->
                        </ul>
                      </div>
                    </div>
                  </li>

                  <li class="car" @click="goCart">
                    <a class="shop-cart-a">
                      <img src="../../../public/img/9f0e8935-982b-4ca9-8772-28da55bd3c5e.png" alt="">
                      <span class="top_cart_count" v-if="carNum > 0">{{carNum}}</span>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- <div class="phone" style="margin-top: 0px;">
                <img src="../../../public/img/c8f87ce8-1e14-4bb3-854e-f86af0f07072.png" alt="">
                <div class="phone_hov">
                  <ul>
                    <li style="background: transparent;background-image:url(../../../public/img/ofuvw2nk5ycrlh8nbheqv4zqhqcune493678.png);background-repeat: no-repeat;background-size: 100%;">
                    </li>
                  </ul>
                </div>
              </div> -->
            </div>
          </div>

          <!-- <div class="ul_r">
            <a>
              门店
            </a>
            <a href="/#/info">
              会员
            </a>
            <a>
              社区
            </a>
          </div> -->
        </div>
      </div>

      <div class="header_box fixTop">
        <div id="lenovo_logo">
          <div id="public_head_logo">
            <a @click="homePage">
              <img class="publicheader-logo0" src="../../../public/img/skz7mq0zavm0hd8xfaq0nrofxcwje3959207.png" alt="联想商城">
            </a>
          </div>
        </div>
        <ul class="ul nav_ul">
          <li v-for="(item,index) in menus" :key="index" class="lis nav2_li">
            <a class="ass">
              {{item.name}}
            </a>
          </li>
        </ul>
        <div class="ul_r_box"></div>
        <!-- 搜索 -->
        <div class="search_btn">
          <img src="../../../public/img/f26ff743-3f82-4072-b27a-193f0e9ad675.png" alt="">
        </div>
        <div class="search think_search_header">
          <a href="javascript:;" class="serch_box_img_btn">搜索</a>
          <div class="logo_text">
            <div class="search_box think_search_header">
              <div class="search_input_bg"></div>
              <a class="serch_box_img"><span></span></a>
              <input type="text" placeholder="毕业季" placeholder-key="毕业季">
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import api from '@/api';
import { mapGetters } from 'vuex';
  export default {
      data() {
        return {
          userInfo:{},
          islogin:false,
          carNum: 2,//购物车数量
          leftTopMenus:[//左上角菜单
            {name:'联想首页'},
            {name:'商城'},
            {name:'消费产品'},
            {name:'企业购'},
            {name:'政教及大企业'},
            {name:'服务'},
            {name:'品牌'}
          ],
          menus:[
            {name:'新品'},
            {name:'定制'},
            {name:'疯狂星期肆'},
            {name:'学生'},
            {name:'游戏'},
            {name:'直播'},
            {name:'试用'},
            {name:'乐豆购'},
            {name:'0元购'}
          ]
        };
      },
      computed: {
        ...mapGetters([
          'userInfo'
        ])
      },
      async mounted() {
        if(sessionStorage.getItem("Authorization")){
          this.islogin=true;
        }
        const resultuser=await api.get("api/user/userinfo");
        this.userInfo=resultuser.data;

        const resultcart=await api.get("api/cart/");
      console.log(resultcart);
        this.carNum=resultcart.data.length!=0?resultcart.data.length:0;
        console.log(this.carNum);
      },
      methods: {
        homePage(){//首页
          this.$router.push({path:'/'});
        },
        loginPage(){//登录注册
          this.$router.push({path:'/login'});
        },
        goCart(){//跳转购物车
          this.$router.push({path:'/cart'})
        },
         logoutFun(){//退出登录
          this.$confirm("确定退出登录?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async() => {
             const result= await api.postForm("/api/user/loginout");
             sessionStorage.removeItem("Authorization")
              this.$notify({
                title: '提示',
                message: '退出成功',
                type: 'success'
                //duration: 0//为0则不会自动关闭
              });
              //清除用户信息缓存
              
              this.$router.push({path: '/'});
            })
        }
      }
    };
</script>

<style scoped>
  a{
    cursor: pointer;
  }
  .header_2018 {
    width: 100%;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 9999;
    min-width: 1200px;
    -moz-box-shadow: 0px 0px 8px 0px rgba(181,181,181,0.5);
    box-shadow: 0px 0px 8px 0px rgba(181,181,181,0.5);
  }
  .clear_rx {
    zoom: 1 !important;
  }
  .header_2018 .pull_bg {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: 15;
  }
  .header_2018 .header_nav {
    min-width: 1200px;
    height: 40px;
    background: #41444c;
  }

  .header_2018 .header_nav .content {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
  }
  @media screen and (min-width: 1700px){
    .header_2018 .header_nav .content {
      width: 1600px;
    }
  }
  .header_2018 .header_nav .content .ul_nav {
    position: relative;
  }
  .header_2018 ul {
    margin: 0;
  }
  ul, li {
    list-style: none;
  }
  .header_2018 .header_nav .content .lis {
    float: left;
    line-height: 40px;
    height: 40px;
    font-size: 13px;
    color: #b5b5b5;
    margin-right: 22px;
  }
  .app_down {
    position: relative;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .header_2018 .header_nav .content .lis a {
    color: #b5b5b5;
  }
  .ul_r_2018 {
    float: right;
    min-height: 40px;
    position: relative;
  }
  .ul_r_2018 .hd-login-regist {
    float: left;
    position: relative;
    font-size: 12.5px;
  }
  .header_2018 a {
    text-decoration: none;
  }
  .ul_r_2018 .vertical-line {
    border-left: 1px solid #b8b8b8;
    height: 11px;
    display: inline-block;
    margin: auto 2px;
  }
  .ul_r_2018 .phone {
    float: right;
    width: 30px;
    height: 40px;
    position: relative;
    box-sizing: border-box;
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  .ul_r_2018 .phone img {
    width: 20px;
    height: 20px;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .ul_r_2018 .phone .phone_hov {
    display: none;
    position: absolute;
    left: -92px;
    top: 50px;
    float: left;
    width: 200px;
    z-index: 100;
  }
  .ul_r_2018 .phone:hover .phone_hov {
    display: block;
  }
  .ul_r_2018 .phone .phone_hov ul {
    border-radius: 5px;
    overflow: hidden;
  }
  .header_2018 ul {
    margin: 0;
  }
  .ul_r_2018 .phone .phone_hov ul li {
    height: 105px;
    padding: 12px 0 0 12px;
    box-sizing: border-box;
  }
  .ul_r {
    float: right;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .ul_r a {
    margin-right: 15px;
    font-size: 12.5px;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .app_down img {
    display: none;
    position: absolute;
    width: 232px;
    height: 124.4px;
    left: 50%;
    top: 43px;
    z-index: 999;
    transform: translateX(-50%);
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .header_2018 .header_nav .content .lis span:hover {
    color: #f1f1f1;
  }
  .app_down:hover img{
    display: block;
  }
  .header_2018 .header_nav .content .lis a:hover {
    color: #f1f1f1;
  }

  .header_2018 .header_box {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    transition: all .2s;
  }

  .header_2018 .header_box {
    width: 1600px;
  }
  #lenovo_logo {
    top: 0px;
    float: left;
    width: 155px;
    height: 60px;
    transition: all .2s;
    position: relative;
  }
  .header_2018 #lenovo_logo #public_head_logo {
    display: inline;
  }
  #public_head_logo a {
    display: inline-block;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  #lenovo_logo img {
    width: 178px;
    margin-top: 12px;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .header_2018 .header_box .ul {
    float: left;
    height: 60px;
    margin-left: 62px;
  }
  .header_2018 .header_box .ul {
    margin-left: 20px;
  }
  .header_2018 ul {
    margin: 0;
  }
  ul, li {
    list-style: none;
  }

  .header_2018 .header_box .ul .lis {
    float: left;
    margin-right: 26px;
    line-height: 60px;
    height: 56px;
    border-bottom: 4px solid transparent;
    transition: all .2s;
  }
  .header_2018 .header_box .ul .lis {
    margin-right: 45px;
  }
  .header_2018 .header_box .ul .lis .ass {
    font-size: 16px;
    color: #252525;
    font-weight: 400;
    position: relative;
  }
  .header_2018 a {
    text-decoration: none;
  }
  .search_btn {
    float: right;
    height: 50px;
    width: 50px;
    padding: 15px;
    box-sizing: border-box;
    display: none;
    margin-right: 0px;
  }
  .search_btn img {
    width: 20px;
    height: 20px;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }

  .header_box .search {
    float: right;
    width: 280px;
    height: 36px;
    position: relative;
    margin-top: 13px;
  }
  .header_box .search {
    width: 420px;
    position: relative;
  }
  .header_box .search .serch_box_img_btn {
    width: 70px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #2077ff;
    color: #fff;
    font-size: 14px;
    position: absolute;
    border-radius: 2px;
    left: auto;
    top: 0;
    right: 0;
    z-index: 2;
    display: none;
  }

  .header_box .search .logo_text {
    width: 280px;
    height: 36px;
  }
  .header_box .search .logo_text {
    width: 300px;
  }
  .search_box {
    position: relative;
  }

  .search_box .search_input_bg {
    width: 280px;
    height: 36px;
    background-color: #f4f4f4;
    position: absolute;
    top: 0px;
    z-index: 0;
    left: 0px;
  }
  .search_box div {
    font-family: '微软雅黑';
  }
  .search_box .search_input_bg {
    width: 420px;
  }
  a.serch_box_img {
    display: block;
    text-align: center;
    font-size: 16px;
    font-family: 微软雅黑;
    margin-right: 0;
    position: absolute;
    float: none;
    left: 10px;
    top: 1px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    z-index: 2;
    cursor: pointer;
  }

  .search_box a {
    text-decoration: none;
  }
  a.serch_box_img span {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 7px;
    background-image: url(https://p4.lefile.cn/product/adminweb/2018/12/29/f26ff743-3f82-4072-b27a-193f0e9ad675.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .search_box input {
    width: 220px;
    height: 36px;
    outline: 0;
    font-size: 13px;
    line-height: 36px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: transparent;
    border: 0;
    color: #999;
    padding: 0 0 0 50px;
    box-sizing: content-box;
  }
  .search_box input {
    width: 350px;
  }
  .search_box ul {
    position: absolute;
    float: right;
    top: 7px;
    right: -16px;
  }
  .header_2018 .header_box .ul .lis:hover {
    border-bottom: 4px solid #e12726;
  }
  .ul_r_2018 .hd-login-show {
    float: left;
  }
  .header_2018 ul {
    margin: 0;
  }
  ul, li {
    list-style: none;
  }
  .ul_r_2018 .hd-login-show .user {
    position: relative;
    box-sizing: border-box;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
  }
  .ul_r_2018 .hd-login-show li {
    float: left;
  }
  .ul_r_2018 .hd-login-show .user .userNameNav {
    width: 80px;
    overflow: hidden;
    font-size: 13px;
    display: inline-block;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ul_r_2018 .hd-login-show .user img {
    width: 15px;
    height: 15px;
    margin-top: 13px;
    display: inline-block;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .ul_r_2018 .hd-login-show .myCenter.bg_sliver {
    background: url(https://p4.lefile.cn/fes/cms/2022/08/12/bg_sliver.png) no-repeat;
    background-size: 100%;
  }
  .ul_r_2018 .hd-login-show .myCenter {
    position: absolute;
    width: 425px;
    height: 0;
    left: -218px;
    top: 40px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all .2s;
    z-index: 10000102;
    box-shadow: 0px 6px 10px 0px rgba(193,193,193,0.24);
  }
  .clear_rx {
    zoom: 1 !important;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .uer_img {
    width: 60px;
    height: 60px;
    float: left;
    margin: 26px 18px 0 38px;
    border-radius: 50%;
  }
  .ul_r_2018 .hd-login-show .user img {
    display: inline-block;
  }
  .header_2018 img {
    border: 0;
    vertical-align: top;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .blackgold-userimg-sign {
    display: none;
  }
  .ul_r_2018 .hd-login-show .user img {
    width: 15px;
    height: 15px;
    margin-top: 13px;
    display: inline-block;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .user_id {
    float: left;
    line-height: 26px;
    margin-top: 26px;
    font-size: 15px;
    color: #ad8953;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .user_id .noName {
    font-size: 20px;
    color: #252525;
    max-width: 130px;
    margin-right: 5px;
    overflow: hidden;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .user_id .my-card-box {
    display: flex;
    margin-top: 8px;
  }
  .ul_r_2018 .myCenter .user_id .my-black-card {
    background: url(https://p1.lefile.cn/fes/cms/2022/08/12/blackGold.png) no-repeat;
    background-size: 100%;
    width: 44px;
    height: 16px;
    margin-right: 4px;
  }
  i {
    font-style: normal;
  }
  .ul_r_2018 .hd-login-show .user .blackgold-title-icon.sliver_icon {
    background: url(https://p1.lefile.cn/fes/cms/2022/08/12/sliver_icon.png) no-repeat center center;
    background-size: 100%;
  }
  .ul_r_2018 .hd-login-show .user .blackgold-title-icon {
    display: block;
    width: 70px;
    height: 16px;
    margin-right: 4px;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .user_id .mycard-subtitle-link {
    display: none;
    width: 60px;
    height: 16px;
    background-size: contain !important;
    position: relative;
    background: url(https://p2.lefile.cn/fes/cms/2022/08/02/go_black_card.png) no-repeat center center;
    background-size: 100%;
  }
  .ul_r_2018 .hd-login-show .myCenter .top .logout {
    float: right;
    font-size: 14px;
    color: #888;
    border-bottom: 1px solid #888;
    line-height: 20px;
    margin-right: 45px;
    margin-top: 32px;
  }
  .ul_r_2018 .hd-login-show .myCenter .mid {
    height: 73px;
    margin-top: 8px;
    padding-top: 10px;
    margin-left: 23px;
  }
  .header_2018 ul {
    margin: 0;
  }
  .ul_r_2018 .hd-login-show .myCenter .mid li {
    width: 94px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    font-size: 16px;
  }
  .ul_r_2018 .hd-login-show li {
    float: left;
    position: relative;
  }
  .header_2018 a {
    text-decoration: none;
    color: #b5b5b5;
  }
  .ul_r_2018 .hd-login-show .myCenter .bottom {
    padding-top: 11px;
    overflow: hidden;
  }
  .ul_r_2018 .hd-login-show .myCenter .bottom ul {
    margin-left: 40px;
  }
  .header_2018 ul {
    margin: 0;
  }
  .ul_r_2018 .hd-login-show .myCenter .bottom li {
    margin-right: 32px;
    line-height: 40px;
  }
  .ul_r_2018 .hd-login-show li {
    float: left;
    position: relative;
  }
  .ul_r_2018 .hd-login-show .myCenter .bottom img {
    width: 58px;
    height: 58px;
    display: block;
  }
  .ul_r_2018 .hd-login-show .user img {
    margin-top: 13px;
  }
  .ul_r_2018 .hd-login-show .myCenter .bottom li span {
    color: #767676;
    font-size: 16px;
    text-align: center;
  }
  .ul_r_2018 .hd-login-show li {
    float: left;
    position: relative;
  }
  .ul_r_2018 .hd-login-show .car img {
    margin: 12px 0px 8px 20px;
    width: 20px;
    height: 20px;
    display: block;
  }
  .top_cart_count {
    display: inline-block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2px;
    left: 40px;
    border-radius: 50% 50% 50% 0%;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
  }
  .ul_r_2018 .hd-login-show .user:hover .myCenter {
    transition: all .2s;
    height: 333px;
  }
</style>
